<template>
  <footer>
    <div class="footer-menus">
      <div class="contact-info">
        <p class="menu-title">联系方式</p>
        <ul>
          <li>
            <i class="iconfont icon-dizhi"><span>地址:广东省广州市</span></i>
          </li>
          <li>
            <i class="iconfont icon-dianhua"><span>电话:18902589247</span></i>
          </li>
          <li>
            <i class="iconfont icon-youxiang"><span>邮箱:jmzws@qq.com</span></i>
          </li>
          <li>
            <i class="iconfont icon-weixin"><span>微信二维码</span> </i>
          </li>
        </ul>
      </div>
      <div class="social-account">
        <p class="menu-title">社区账号</p>
        <ul>
          <li>
            <i class="iconfont icon-gitee-fill-round"
              ><a href="https://gitee.com/weison_zhong" target="_blank"
                >Gitee</a
              ></i
            >
          </li>
          <li>
            <i class="iconfont icon-GitHub"
              ><a href="https://github.com/Weison-Zhong" target="_blank"
                >GitHub</a
              ></i
            >
          </li>
          <li>
            <i class="juejin">
              <img src="@/assets/images/juejin.png" alt="" />
              <a href="https://juejin.cn/user/299507144465550" target="_blank"
                >掘金</a
              ></i
            >
          </li>
          <li>
            <i class="iconfont icon-tubiaozhizuomoban"
              ><a
                href="https://www.yuque.com/weison-zuztf?tab=books"
                target="_blank"
                >语雀</a
              ></i
            >
          </li>
        </ul>
      </div>
      <div class="website-data">
        <p class="menu-title">数据汇总</p>
        <ul>
          <li>
            <i class="iconfont icon-fangketongji"
              ><span>访客数量: {{ footerInfo.totalVisitors }}</span></i
            >
          </li>
          <li>
            <i class="iconfont icon-pinglun1-copy"
              ><span>评论数量: {{ footerInfo.totalComments }}</span></i
            >
          </li>
          <li>
            <i class="iconfont icon-wenzhang1"
              ><span>文章数量: {{ footerInfo.totalArticles }}</span></i
            >
          </li>
          <li>
            <i class="iconfont icon-yunhangtianshu-12"
              ><span>运行天数: {{ footerInfo.serviceDays }}</span></i
            >
          </li>
        </ul>
      </div>
      <div class="echarts">
        <p class="menu-title">最近五个月访客统计</p>
        <Echarts :echartsData="footerInfo.echartsInfo" />
      </div>
      <div class="qrcode-menu">
        <p class="menu-title">移动端二维码</p>
        <div class="qrcode">
          <img src="@/assets/images/qrcode.png" alt="" />
        </div>
      </div>
    </div>

    <div class="icp-info">
      <span>&copy;2021 钟伟胜博客网站</span>
      <span
        ><a href="https://beian.miit.gov.cn" target="_blank"
          >备案号:粤ICP备2021082029号</a
        ></span
      >
    </div>
  </footer>
</template>

<script>
import http from "../../services/http";
import Echarts from "./echarts.vue";
import { reactive, toRefs } from "vue";
export default {
  name: "Footer",
  components: {
    Echarts,
  },
  setup() {
    const state = reactive({
      footerInfo: {},
    });
    const getFooterInfo = async () => {
      const res = await http.get("footer");
      state.footerInfo = res.data;
    };
    getFooterInfo();
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>